@extends("backend.layout.main")






@section("right_content")



    <!--middle-->
    <div class="mainWrapBox">
        <div class="mainBox">
       <div class="html">
 <div class="dashboard-title">2016-07-16，星期六 一天的工作从Xcube开始……<span style="float:right;margin-right:20px;"><a data-toggle="modal" data-target="#addcusPanel" onclick="getPanel()" href="javascript:void(0);">添加面板</a></span></div>
        <div class="dashboard-shortcut">
            <p><span class="title">快捷操作</span>
                <a href="" class="primarybtn btn-border-gray ml30">写日报</a>
                <a href="javascript:;" data-toggle="modal" class="costPanel primarybtn btn-border-gray ml30">记录支出</a>
                    <a href="" class="primarybtn btn-border-gray ml30" target="_blank">创建项目</a>
                    <a href="" class="primarybtn btn-border-gray ml30" target="_blank">创建线索</a>
                    <a href="" class="primarybtn btn-border-gray ml30" target="_blank">创建机会</a>
                    <a href="" class="primarybtn btn-border-gray ml30" target="_blank">创建合同</a>
                    <a href="" class="primarybtn btn-border-gray ml30" target="_blank">添加客户</a>

            </p>
            <p><span class="title">快速链接</span>
                        <a href="javascript:void(0)" id="k-s-l-j-1" data-target="#modalPanel_1" data-url="" data-toggle="quick_link" class="ml30 shortcut-link">• 费用支出明细</a>
                        <a href="javascript:void(0)" id="k-s-l-j-2" data-target="#modalPanel_2" data-url="" data-toggle="quick_link" class="ml30 shortcut-link">• 合同开票明细</a>
                        <a href="javascript:void(0)" id="k-s-l-j-7" data-target="#modalPanel_7" data-url="" data-toggle="quick_link" class="ml30 shortcut-link">• 合同回款明细</a>
                        <a href="javascript:void(0)" id="k-s-l-j-9" data-target="#modalPanel_9" data-url="" data-toggle="quick_link" class="ml30 shortcut-link">• 开票与回款</a>
                        <a href="javascript:void(0)" id="k-s-l-j-19" data-target="#modalPanel_19" data-url="" data-toggle="quick_link" class="ml30 shortcut-link">• 员工项目总表</a>
                        <a href="javascript:void(0)" id="k-s-l-j-20" data-target="#modalPanel_20" data-url="" data-toggle="quick_link" class="ml30 shortcut-link">• 项目收支总表</a>
            </p>
        </div>
        <div id="dashboard-link-container" class="dashboard-link-container" style="display: none">

        </div>
            <div data="check" class="panel-modal-dialog">
        <div class="panel-modal-content">
            <div class="panel-modal-header ">
                <span class="panel-modal-title">费用支出明细 · 全公司 </span>
               
            </div>
            <div class="clear"></div>
            <form id="queryForm_1" method="POST">

            
                <input type="hidden" name="id" value="1">
                <input type="hidden" name="start" id="start_1" value="0">
                <input type="hidden" name="limit" id="limit_1" value="20">
                <div class="" style="padding:15px">
                    <div class="filter-panel">
                      






                        <div class="left mt13">
                        <span class="choseBtn">
                             <a href="javascript:;" class="" id="allMonth_1">全部</a>
                    <em>｜</em>
                            <a href="javascript:;" class="active" id="thisMonth_1">本月</a>
                    <em>｜</em>
                <a href="javascript:;" id="lastMonth_1">上月</a>
                        </span>
                        <span class="ml10">请输入查找关键字
                            <input type="text"  class="inputStyle w150"  val="" >

                            <input type="button" value="搜索" class="searchDateBtn searchKey">
                            <input type="submit" value="搜索">
                        </span>
                        </div>






        </div></div>


         </form>
        <div id="table_1">  


        <table cellpadding="0" cellspacing="0" class="table-font12 mt10">
    <thead class="table-font12-header">
    <tr>
        <th width="120px;">费用类型</th>
        <th width="100px;">创建人</th>
        <th width="100px;">申请时间</th>
        <th width="100px;">金额</th>
        <th width="200px;">内容</th>
        <th >关联项目</th>
        <th width="90px">查看凭证</th>
        <th width="100px" style="text-align: center;">审核</th>
    </tr>
    </thead>
    <tbody class="table-font12-body">


 @foreach($expense as $v)

    <tr>

   
         <td>{{ $v->expense_type }}</td>
         <td>{{ $v->username }}</td>
         <td>{{ $v->time }}</td>
         <td>{{ $v->salary }}元</td>
         <td>{{ $v->description }}</td>
         <td>{{ $v->itemname }}</td>

         <td><div class="piclookc" style="width:32px;height:32px;cursor: pointer;" data-id="{{ $v->fid }}"><img src="/backend/images/pic-pic.png"></div></td>
         

         <td id="position">
         @if( $v->status==2 )
<a href="javascript:;" a_id='0' did="{{ $v->did }}" tid="{{ $v->type }}" class="status">通过</a>&nbsp;&nbsp;
<a href="javascript:;" a_id='1' did="{{ $v->did }}" tid="{{ $v->type }}" class="notpass">不通过</a>
         @elseif( $v->status==0 )
         <span>通过</span>
         @elseif( $v->status==1 )
         <span>未通过&nbsp;&nbsp;</span>
         @endif
         </td>
        
    </tr>


 @endforeach
    </tbody>
</table>



                        <div class="pagination" style="float: right;">
                            {!! $expense->links() !!}
                            <input type="hidden" id="page" name="page">
                        </div>


<!-- 未通过原因 start -->
<div class="modal" id="reason" style="display:none">

<h2 style="text-align: center;">请输入未通过原因</h2>

<form action="/backend/work/expense/passornot" method="POST">

{{ csrf_field() }}


    <textarea class="form-control textarea" name="rea" cols="77.5" rows="10"></textarea>

    <input type="submit" value="提交" class="btn green" style="float: right; margin:18px 10px 0px 0px">
    <input type="hidden" name="did" value="" >
    <input type="hidden" name="type" value="" >
    <input type="hidden" name="id" value="" >
    </p>      

</form>

</div>

<!-- 未通过原因 end -->


<!--图片显示div开始-->
          

    <div class="modal" id="piclook" style="display:none">
        <div class="modal-header ">
            <span class="modal-title"><div><em id="sortimg"></em>/<em id="numallimg">3<em></div> </span>
        </div>


         <div class="modal-body" style="padding:15px;height:600px;text-align:center;position: relative;">

        </div>
<div>
              <div class="left_move"><img src="/backend/images/left_move.png"></div>
           <div class="right_move"><img src="/backend/images/right_move.png"></div> 
</div>

      </div>

   

      
<!--图片显示div结束-->



<table class="table ">
    <tbody class="table-footer">
    <tr>
        <td style="text-align: left;">
            <span>
               
            </span>
        </td>
        <td style="text-align: right; vertical-align: middle;"></td>
    </tr>
    </tbody>
</table>
</div>
    </div>
</div>
</div>
        </div>
    </div>
 </div> 
 </div> 












 </body>
 <script type="text/javascript" src="/backend/js/jquery.min.js"></script>
<script type="text/javascript" src="/backend/js/laydate.js"></script>
<script type="text/javascript" src="/backend/js/jquery.hDialog.min.js"></script>



<script type="text/javascript">

$(document).on('click','.piclookc',function(){

   $('.modal-body').empty();
    var id = $(this).attr('data-id');

    $.ajax({
        type:'GET',
        url:"backend/work/expense/ajaxpic",
        data:{id:id},
        dataType:'json',
        success:function(e){
           // alert(e.length);

            for( var i=0; i<e.length;i++ ){


                $('.modal-body').append("<img src='/uploadsExpense/"+e[i]+"'  class='look-pic' />");
                $('.look-pic').removeClass('show');
                $('.look-pic').eq(0).addClass('show');
                $('#numallimg').html(e.length);
                $('#sortimg').html(1);

            }
        }
    });


 })


         $('.piclookc').hDialog({
                box:'#piclook',
                width:'900px',
                height:'600px',
                positions: 'top',
                modalHide: true,
                closeBg: '#fff',
        }); 













 $(document).on('click','.right_move',function(){
     $('.look-pic').each(function(index){
        if ($(this).hasClass('show')) {
            if(index+1==$('.look-pic').length){
                $('#sortimg').html(1);
            }else{
                $('#sortimg').html(index+2);
            }
         $('.look-pic').removeClass('show');
         if(index+1==$('.look-pic').length){
            $('.look-pic').eq(0).addClass('show');
         }else{
              $('.look-pic').eq(index+1).addClass('show');
         }
       
       return false;
        }
     })
  
 })
  $(document).on('click','.left_move',function(){
     $('.look-pic').each(function(index){
        if ($(this).hasClass('show')) {
            if(index==0){
                $('#sortimg').html($('.look-pic').length);
            }else{
                $('#sortimg').html(index);
            }
         $('.look-pic').removeClass('show');
         if(index==0){
            $('.look-pic').eq($('.look-pic').length-1).addClass('show');
         }else{
              $('.look-pic').eq(index-1).addClass('show');
         }
       
       return false;
        }
     })
  
 })






  $(function(){
   
     $('.notpass').hDialog({

                box:'#reason',
                width:'550px',
                height:'330px',
                positions: 'top',
                modalHide: false,
                closeBg: '#fff',


        }); 
    $(".notpass").on('click',function(){
        //event.stopPropagation();
        //var reason = $(".textarea").val();
        var id = $(this).attr('a_id');
        var type = $(this).attr('tid');
        var did = $(this).attr('did');

        $('input[name=id]').val(id);
        $('input[name=did]').val(did);
        $('input[name=type]').val(type);


        


    });
});


  $(function(){
    $(".status").on('click',function(){
     
        event.stopPropagation();
        var id = $(this).attr('a_id');
        var type = $(this).attr('tid');
        var did = $(this).attr('did');
        var reason = '';
        //var _Token="{{ csrf_token() }}";

            $.ajax({

                type:"GET",
                url:"/backend/work/expense/passornot",
                data:{id:id,type:type,did:did,reason:reason},
                dataType:'json',
                success:function(e){
                    location.reload();
                }

            });                 
    });
});

// $(function(){

//   $('.searchKey').on('click',function(){



//     var text = $('.inputStyle').val();



//     var _Token="{{ csrf_token() }}";

//         $.ajax({

//                 type:"POST",

//                 url:"/backend/work/expense/showdownload",
//                 data:{text:text,_Token:_Token,},
//                 dataType:'json',

//                 success:function(e){
//                     console.log(e);
//                 }

//             }); 
//   })

// })



 </script>
 @endsection
